<template>
	<div class="tag-item">
		<a-tag color="arcoblue" v-for="item in (list.length > number ? list.slice(0, number) : list)" :key="item.id"
			:style="{ color: item.color,background:hexToRgba(item.color || '#165DFF',0.08),borderColor:item.color}">
			<span v-if="params">
				{{ item[params] }}
			</span>
			<span v-else>{{ item }}</span>
		</a-tag>
		<a-trigger auto-fit-position placement="bottom" :width="260" trigger="hover" :teleported="false">
			<template #reference>
				<a-tag v-if="list.length >number">+{{ list.length - number }}</a-tag>
			</template>
			<a-tag color="arcoblue" v-for="item in (list.length && list.slice(number))" :key="item">
				<span v-if="params">
					{{ item[params] }}
				</span>
				<span v-else>{{ item }}</span>
			</a-tag>
		</a-trigger>
	</div>
</template>
<script lang="ts" setup>
import { hexToRgba } from '@/utils/index.ts';
const props = defineProps({
    list: { type: Array, default: () => { return [] } },
    number: { type: Number, default: () => { return 2 } }, // 超出几个展示更多
    params: { type: String, default: () => { return '' } }, // item下的某某某
})
</script>
<style lang="scss" scoped>
.tag-item {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	:deep(.el-popover){
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}
	.el-tag{
		margin: 0;
	}
}
</style>
